<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>

<body>
    <img src="https://img1.baidu.com/it/u=722430420,1974228945&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
    <img src="https://img0.baidu.com/it/u=3798217922,3880088897&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500" alt="">
    <img src="https://img0.baidu.com/it/u=512340543,3139277133&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" alt="">
    <script>
        /* 
            让我们的浏览器所有的资源都加载完毕的时候,我们执行这个函数 
        */
        // window.onload = function(){
        //     console.log("浏览器加载完所有资源的时候,执行这个函数");
        // }



        /* 浏览器的尺寸发生改变 */
        window.onresize = function () {
            // console.log("浏览器的可视尺寸改变");
            // 获取浏览器的可视的宽高
            console.log(innerWidth,window.innerHeight);
        }

        /* 浏览器的滚动条发生改变 */
        window.onscroll = function(){
            console.log("浏览器的滚动条移动了");
        }
    </script>
</body>

</html>